<template>
  <el-descriptions title="巡视记录详情" :column="2" class="descriptions">
    <el-descriptions-item label="巡检名称">{{ task.patrolTaskName }}</el-descriptions-item>
    <el-descriptions-item label="巡检路线">{{ task.patrolRouteName }}</el-descriptions-item>
    <el-descriptions-item label="开始时间">{{ task.startTime }}</el-descriptions-item>
    <el-descriptions-item label="结束时间">{{ task.endTime }}</el-descriptions-item>
    <el-descriptions-item label="巡视时长">{{ task.description }}</el-descriptions-item>
    <el-descriptions-item label="报警次数">{{ task.eventNum }}</el-descriptions-item>
    <el-descriptions-item label="创建人">{{ task.createName }}</el-descriptions-item>
    <el-descriptions-item label="执行人">{{ task.executeUserName }}</el-descriptions-item>
    <el-descriptions-item label="备注">{{ task.remark }}</el-descriptions-item>
  </el-descriptions>

  <el-descriptions title="巡视设备记录" />
  <el-table v-loading="loading" :data="cameraPatrolTaskLogList" height="400px">
    <el-table-column label="巡检设备名称" align="center" prop="equipmentName" />
    <el-table-column label="设备位置" align="center" prop="cameraGroupName" />
    <el-table-column label="巡视时长" align="center" prop="patrolDuration" />
  </el-table>

  <el-descriptions title="巡视事件记录" />
  <el-table v-loading="eventRecordLoading" :data="eventRecordList" height="400px">
    <el-table-column label="类型" align="center" prop="eventType" />
    <el-table-column label="报警时间" align="center" prop="eventTime" />
    <el-table-column label="记录监控" align="center" prop="" />
    <el-table-column label="位置" align="center" prop="eventAddress" />
    <el-table-column label="抓拍照片" align="center">
      <template #default="scope">
        <el-tooltip content="修改" placement="top">
          <el-button v-hasPermi="['camera:patrolTaskInfoLog:edit']" link type="primary" @click="handlePicView(scope.row)">查看 </el-button>
        </el-tooltip>
      </template>
    </el-table-column>
  </el-table>


  <el-dialog v-model="dialogPicView.shouAdd" :title="dialogPicView.title" width="500px" append-to-body>
    <el-image
      style="width: 100px; height: 100px"
      :src="url"
      :zoom-rate="1.2"
      :max-scale="7"
      :min-scale="0.2"
      :preview-src-list="srcList"
      :initial-index="4"
      fit="cover"
    />
  </el-dialog>
</template>

<script setup lang="ts">
import { getpatroltaskinfolog } from '@/api/security/video-patrol/camera-patrol-task-info';

const { proxy } = getCurrentInstance() as ComponentInternalInstance;

const eventRecordLoading = ref(false);
const loading = ref(true);

const srcList = ref([]);
const url = ref('');
const cameraPatrolTaskLogList = ref([]);
const eventRecordList = ref([]);

const emit = defineEmits(['close', 'success']);

const dialogPicView = reactive<DialogOption>({
  visible: false,
  title: ''
});

const props = defineProps({
  recordId: String
});

const task = ref({
  cameraPatrolTaskInfoLogId: undefined,
  remark: undefined,
  patrolTaskId: undefined,
  executeUserId: undefined,
  patrolDuration: undefined,
  startTime: undefined,
  endTime: undefined,
  eventNum: undefined,
  patrolTaskName: undefined,
  patrolRouteName: undefined,
  createName: undefined,
  executeUserName: undefined,
  description: undefined,
  imgUrlList: undefined,
  cameraPatrolTaskLogList: [],
  eventRecordList: []
});

const handlePicView = (row) => {
  srcList.value = row.imgUrlList;
  url.value = row.imgUrlList[0];
  dialogPicView.shouAdd = true;
  dialogPicView.title = '图片预览';
};

/**
 * 获取巡视记录详情
 */
const getDetail = async () => {
  console.log('获取巡视记录详情')
  loading.value = true;
  eventRecordLoading.value = true;
  const res = await getpatroltaskinfolog(props.recordId);
  if (res.code !== 200) {
    loading.value = false;
    proxy.$modal.msgError('获取记录详情失败!');
    emit('close');
  }
  Object.assign(task.value, res.data);
  cameraPatrolTaskLogList.value = task.value.cameraPatrolTaskLogList;
  eventRecordList.value = task.value.eventRecordList;
  console.log('报警',eventRecordList.value);
  loading.value = false;
  eventRecordLoading.value = false;
};

onMounted(() => {
  getDetail();
});
</script>
